<template>
	<view class="content">
		<view class="t">
			<view class="search">
				<view class="le" @tap="go_search()">
					<image src="../../static/images/searchicon.png" mode=""></image>
					<text>学生党如何赚钱?</text>
				</view>
				<view class="ri" @tap="go_add()">
					<image src="../../static/images/addquestion.png" mode=""></image>
					<text>提问</text>
				</view>
			</view>
		</view>
		<view :style="top">
			
		</view>
		<view class="question" v-for="(item,index) in questions" :key="index" @tap="go_detail(item.id)" >
			<view class="top">
				{{item.questionTitle}}
			</view>
			<view class="mid1" v-if="item.questionImgUrl.length!=0">
				<text>{{item.questionDesc}}</text>
				<image :src="getRealPath(item.questionImgUrl)"></image>
			</view>
			<view class="mid2" v-if="item.questionImgUrl.length==0">
				<text>{{item.questionDesc}}</text>
			</view>
			<view class="bottom">
				<view class="left">
					{{item.stars}} 赞同 · {{item.answers}} 回答
				</view>
				<image src="../../static/images/sandian.png" mode="" @tap="more"></image>
			</view>
		</view>
		<view v-if="questions.length!=0" style="margin-bottom: 120upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{content}}</view>
		<view class="tab" @tap="go_mycenter()">
			<view class="ll">
				<image :src="getRealPath(user.imgUrl)" mode=""></image>
				<view style="height: 66upx;display: flex;margin-left: 20upx;
				flex-direction: column;justify-content: space-between;">
					<text style="font-size: 26upx;font-weight:600 ;">{{user.nickName}}</text>
					<text style="font-size: 22upx;color: #999999;">{{ques}} 提问 · {{anws}} 回答</text>
				</view>
			</view>
			<view class="rr">
				我的问答 <uni-icon type="arrowright" size="12" color="#999"></uni-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import utils from "../../static/js/utils.js"
	let top;
	// #ifdef APP-PLUS
	const device = uni.getSystemInfoSync();
	top = device.statusBarHeight + uni.upx2px(100);
	// #endif
	// #ifdef MP-WEIXIN
	 top = uni.upx2px(100) + 82;
	// #endif
	import {
			mapState,
			mapMutations
		} from 'vuex';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				pageId: 0,
				content: '',
				questions: [],
				ques:0,
				anws:0
			}
		},
		computed:{
			...mapState(['user','questionChange']),
			top(){
				return "width:100%;height:"+top+"px";
			}
		},
		onLoad() {
			let that =this;
			this.getQuestion(0,0);
			utils.post("question/getcount",{
				userId:this.user.id
			},function(data) {
				that.ques = data.questions;
				that.anws = data.anws;
			})
		},
		onShow(){
			if(this.questionChange) {
				this.getQuestion(0,0);
			}
		},
		onPullDownRefresh() {
			this.getQuestion(0, 0);
		},
		onReachBottom() {
			if (this.content != "没有更多数据了") {
				let pId = this.pageId;
				this.getQuestion(pId + 1, 1);
			}
		
		},
		methods: {
			more(){
				uni.showActionSheet({
					itemList: ['分享'],
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			go_mycenter() {
				uni.navigateTo({
					url: 'questioncenter'
				});
			},
			go_detail(index) {
				uni.navigateTo({
					url: 'questiondetail?questionId=' + index
				})
			},
			go_search() {
				uni.navigateTo({
					url: 'searchquestion'
				});
			},
			go_add() {
				uni.navigateTo({
					url: 'add'
				});
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			getQuestion(pageId,type){
				let that = this;
				utils.get("question/index", {
					pageId
				}, function(data) {
					if (type == 0) {
						that.content = "";
						that.questions = data;
						uni.stopPullDownRefresh();
					} else {
						if (data.length == 0) {
							that.content = "没有更多数据了"
						} else {
							that.questions.push.apply(that.questions, data);
							that.pageId++;
						}
							
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
	}

	.tab {
		width: 100%;
		height: 110upx;
		display: flex;
		flex-direction: row;
		position: fixed;
		background-color: #ffffff;
		z-index: 999;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		box-shadow: inset 0px 1px 1px -1px #c8c7cc;
	}

	.ll {
		flex: 1;
		margin-left: 4%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.ll image {
		width: 66upx;
		height: 66upx;
		border-radius: 66upx;
	}

	.rr {
		width: 150upx;
		font-size: 22upx;
		background-color: #f6f6f6;
		height: 50upx;
		border-radius: 20upx;
		text-align: center;
		line-height: 50upx;
		margin-right: 4%;
		color: #999999;
	}


	.t {
		width: 100%;
		height: 100upx;
		align-items: center;
		background-color: #ffffff;
		display: flex;
		position: fixed;
		top: 0;
		flex-direction: column;
		justify-content: center;
		/* #ifdef MP-WEIXIN */
		padding-top: 76px;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		z-index: 999;
	}

	.search {
		width: 92%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #f6f6f6;
		border-radius: 8upx;

	}

	.le {
		height: 50upx;
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-right: 1px solid #dcdcdc;
	}

	.le image {
		width: 30upx;
		height: 30upx;
		margin-left: 40upx;
	}

	.le text {
		font-size: 28upx;
		color: #777777;
		margin-left: 40upx;
	}

	.ri {
		width: 160upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 50upx;
	}

	.ri image {
		width: 30upx;
		height: 30upx;
	}

	.ri text {
		font-size: 28upx;
		color: #777777;
		margin-left: 30upx;
	}

	.question {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.top {
		width: 92%;
		height: 70upx;
		font-size: 30upx;
		font-weight: 600;
		line-height: 80upx;
	}

	.mid1 {
		width: 92%;
		height: 160upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.mid1 text {
		max-width: 400upx;
		font-size: 24upx;
		height: 94upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.mid1 image {
		height: 160upx;
		width: 260upx;
		border-radius: 20upx;
	}

	.mid2 {
		width: 92%;
		height: 120upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.mid2 text {
		font-size: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		height: 94upx;
	}

	.bottom {
		width: 92%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		font-size: 22upx;
		color: #999999;
		height: 80upx;
		line-height: 80upx;

	}

	.bottom image {
		width: 40upx;
		height: 40upx;
	}
</style>
